<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" style="background: #f5fff5">
      <img src="../../assets/logo1.png" alt="logo"
           style ="height:150px; width:150px; float: left; margin: 20px 0 30px 30px">
      <a-menu style="background: #f5fff5" mode="inline" >
        <a-sub-menu key="sub1">
          <span slot="title"><a-icon type="setting" /><span>基本信息</span></span>

          <a-menu-item key="1">
            <router-link :to="{path:'/WarehouseToShopOwner'}"><a-icon type="hdd"/>管理仓库</router-link>
          </a-menu-item>
          <a-menu-item key="2">
            <router-link :to="{path:'/ShopToShopOwner'}"><a-icon type="hdd"/>管理店铺</router-link>
          </a-menu-item>
          <a-menu-item key="3">
            <router-link :to="{path:'/GoodsToShopOwner'}"><a-icon type="hdd"/>管理商品</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <span slot="title"><a-icon type="team" /><span>查看顾客</span></span>

          <a-menu-item key="4">
            <router-link :to="{path:'/CustomerToShopOwner'}"> <a-icon type="github" /> 顾客信息</router-link>
          </a-menu-item>

        </a-sub-menu>
        <a-sub-menu key="sub3">
          <span slot="title"><a-icon type="setting" /><span>订单物流</span></span>
          <a-menu-item key="5">
            <router-link :to="{path:'/ManageOrderToShopOwner'}"><a-icon type="hdd"/>订单管理</router-link>
          </a-menu-item>

          <a-menu-item key="6">
            <router-link :to="{path:'/ManageCragoToShopOwner'}"><a-icon type="hdd"/>物流管理</router-link>
          </a-menu-item>
          <a-menu-item key="7">
            <router-link :to="{path:'/ViewLogistics'}"><a-icon type="hdd"/>查看物流公司</router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #f2fff8; padding: 0; text-align: left; font-size:28px;">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />批发市场管理系统（店铺主）
        <a-button  class="editable-logout-btn" @click="showModal3">退出</a-button>
        <a-modal v-model="logoutVisible" title="您确定要退出吗" on-ok="logout">
          <template slot="footer">
            <a-button key="back" @click="logoutVisible=false">
              取消
            </a-button>
            <a-button key="submit" type="primary" @click="logout">
              确定
            </a-button>
          </template>
        </a-modal>
      </a-layout-header>
      <a-layout-content :style="{ margin: '5px 5px', padding: '24px', background: '#fff', minHeight: '575px', height:'100%' }">
        <div id="bg">

        </div>>
        <router-view/>
      </a-layout-content>
      <a-layout-footer style="text-align: center;background: #edfdff">
        版权所有©信管2019
      </a-layout-footer>
    </a-layout>
  </a-layout>


</template>

<script>
    import axios from 'axios'
    export default {
        name: 'IndexOfS',
        data: function (){
            return {
                collapsed: false,
                logoutUrl:this.baseURL+"logout.ctl",
                logoutVisible:false,
                obj:{},
            };
        },
        methods:{
            showModal3() {

                this.logoutVisible = true;
                this.obj={};
            },
            logout(){
                axios.get(this.logoutUrl).then((res)=>{
                    alert(res.data.message);
                    this.obj={}
                })
                this.logoutVisible=false;
                this.$router.push('/')
            },
        }
    }
</script>

<style scoped>

  #bg{width:1600px;
    height: 300px;
    background-image:url("../assets/background5.jpg");
    background-attachment: inherit;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: blur(8px);
  }

  #components-layout-demo-custom-trigger .trigger {
    font-size: 20px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  #components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
  }

  #components-layout-demo-custom-trigger .logo {
    height: 32px;
    background: rgba(53, 252, 255, 0.5);
    margin: 16px;
  }

</style>

